/**
`@reduxjs/toolkit` （Redux Toolkit）是 Redux 的官方工具集，旨在简化 Redux 的使用，提供更好的开发体验。它集成了 Redux 的最佳实践，并减少了 boilerplate 代码，使得 Redux 更加易用。
  1. 基本概念

  - Redux Toolkit 是 Redux 的官方推荐方式，用于构建 Redux 应用程序。它提供了一些工具和功能，可以帮助开发者更轻松地创建和管理 Redux 状态。

  2. 主要功能

  - 简化的 Store 配置：通过  `configureStore`  函数简化 store 的创建和配置，自动添加中间件和开发者工具支持。
  - 创建 Slice：使用  `createSlice`  函数可以快速创建 reducer 和相应的 actions，减少手动编写的代码。
  - 异步处理：通过  `createAsyncThunk`  可以轻松处理异步操作，并自动生成相关的 action 类型和 reducer。
  - 内置的 Immer 支持：允许你在 reducer 中直接修改状态，Redux Toolkit 会自动处理不可变更新。

  3. 使用步骤

   1. 安装 Redux Toolkit

  使用 npm 或 yarn 安装 Redux Toolkit：
  npm install @reduxjs/toolkit react-redux
   2. 创建 Slice

  使用  `createSlice`  创建一个 slice，定义初始状态、reducer 和 actions。
  import { createSlice } from '@reduxjs/toolkit';

  const counterSlice = createSlice({
    name: 'counter',
    initialState: { value: 0 },
    reducers: {
      increment: (state) => {
        state.value += 1; // 直接修改状态
      },
      decrement: (state) => {
        state.value -= 1;
      },
    },
  });

  // 导出 actions 和 reducer
  export const { increment, decrement } = counterSlice.actions;
  export default counterSlice.reducer;
   3. 配置 Store

  使用  `configureStore`  创建 Redux store，并将 slice reducer 添加到 store 中。
  import { configureStore } from '@reduxjs/toolkit';
  import counterReducer from './counterSlice';

  const store = configureStore({
    reducer: {
      counter: counterReducer,
    },
  });

  export default store;
   4. 使用 Provider

  在应用的根组件中使用  `Provider`  将 Redux store 提供给组件树。
  import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import store from './store';
  import App from './App';

  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
  );
   5. 使用 State 和 Dispatch

  在组件中使用  `useSelector`  和  `useDispatch`  来访问状态和派发动作。
  import React from 'react';
  import { useSelector, useDispatch } from 'react-redux';
  import { increment, decrement } from './counterSlice';

  const Counter = () => {
    const count = useSelector((state) => state.counter.value);
    const dispatch = useDispatch();

    return (
      <div>
        <h1>{count}</h1>
        <button onClick={() => dispatch(increment())}>Increment</button>
        <button onClick={() => dispatch(decrement())}>Decrement</button>
      </div>
    );
  };

  export default Counter;
  4. 总结
  Redux Toolkit 是一个强大的工具集，旨在简化 Redux 的使用。通过提供更简洁的 API 和内置的最佳实践，Redux Toolkit 大大减少了样板代码，并提高了开发效率。它不仅适合新手，也为经验丰富的开发者提供了更灵活的状态管理方式。使用 Redux Toolkit，开发者可以更快速地构建和维护 Redux 应用。
 */
import React, { PureComponent } from 'react'
import { connect, counect } from 'react-redux';
import About from './pages/about'
import Home from './pages/home';
import Profile from './pages/profile';
import './style.css'

export class App extends PureComponent {
  render() {
    const { counter } = this.props
    
    return (
      <div>
        <h3>App Counter: {counter}</h3>
        <div className="pages">
          <Home></Home>
          <About></About>
          <Profile></Profile>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  counter: state.counter.counter
})

export default connect(mapStateToProps)(App)
